<template>
  <div id="page-help">
    <!-- 查询 -->
    <div class="page-search-list">
      <el-form
        label-position="left"
        :model="search_form"
        :inline="true"
        ref="healthFromRef"
      >
        <el-form-item
          v-for="(item, i) in search_info"
          :label="item.label"
          :key="i"
          style="margin-bottom: 5px;"
        >
          <template v-if="item.prop === 'start_time'">
            <template v-if="!is_time_period">
              <el-date-picker
                type="dates"
                v-model="search_form.time"
                placeholder="选择一个或多个日期"
                key="time"
                value-format="yyyy-MM-dd"
                :append-to-body="false"
                size="small"
              ></el-date-picker>
            </template>
            <template v-else>
              <el-date-picker
                v-model="search_form.time_period"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                key="time_period"
                value-format="yyyy-MM-dd"
                :append-to-body="false"
                size="small"
              ></el-date-picker>
            </template>
          </template>
          <template v-else-if="item.prop === 'cid'">
            <select-community
              :cid.sync="search_form[item.prop]"
              :pid.sync="search_form.pid"
              :bid.sync="search_form.bid"
              :sid.sync="search_form.sid"
            ></select-community>
          </template>
          <template v-else-if="item.prop === 'plate'">
            <el-select
              v-model="search_form[item.prop]"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option
                v-for="item in plate_arr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
          <template v-else-if="item.prop === 'status'">
            <el-select
              v-model="search_form[item.prop]"
              clearable
              placeholder="请选择"
              size="small"
            >
              <el-option label="未解决" :value="0"></el-option>
              <el-option label="已解决" :value="1"></el-option>
            </el-select>
          </template>
          <template v-else>
            <el-input
              v-model="search_form[item.prop]"
              size="small"
              :placeholder="`请输入${item.label}`"
            ></el-input>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button class="el-icon-search" size="small" @click.native="search">
            搜索
          </el-button>
          <el-button
            type="primary"
            class="el-icon-refresh"
            size="small"
            @click.native="resetSearchFields"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 按钮 -->
    <div class="page-botton-list">
      <el-button
        plain
        class="el-icon-date"
        size="mini"
        @click.native="is_time_period = !is_time_period"
      >
        {{ is_time_period ? '时间查询' : '时间段查询' }}
      </el-button>
      <el-button
        type="success"
        plain
        class="el-icon-edit"
        size="mini"
        :disabled="disable"
        @click="changeStatus"
      >
        修改状态
      </el-button>
    </div>
    <!-- 表格 -->
    <div class="page-table">
      <el-table
        ref="helpTableRef"
        :data="travel_table"
        style="width: 100%;"
        id="travel_tableId"
        @selection-change="selectTabel"
      >
        <el-table-column type="selection" />
        <el-table-column
          v-for="(column, i) in tableInfo"
          :key="i"
          :label="column.label"
          align="center"
        >
          <template slot-scope="scope">
            <template v-if="column.prop === 'status'">
              <el-tag type="success" v-if="scope.row[column.prop] == 1">
                已解决
              </el-tag>
              <el-tag type="info" v-else>未解决</el-tag>
            </template>
            <template v-else-if="column.prop === 'title'">
              <el-link type="primary" @click="openContent(scope.row)">
                {{ scope.row[column.prop] }}
              </el-link>
            </template>
            <template v-else>{{ scope.row[column.prop] }}</template>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120px" align="center">
          <template slot-scope="scope">
            <el-button
              type="success"
              plain
              size="mini"
              class="el-icon-edit"
              @click="changeStatus(scope.row.id)"
            >
              修改状态
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageCount"
        :page-sizes="[10, 100, 200, 300, 400]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tatal"
        class="upload-list-pagination"
      ></el-pagination>
    </div>

    <!-- 修改状态弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="change_dialog_visible"
      width="30%"
      center
      :append-to-body="true"
    >
      <div>
        是否将选择的求助贴设置状态为【已解决】
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="falsechangeStatus">取 消</el-button>
        <el-button type="primary" @click="truechangeStatus">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 详细求助信息弹窗 -->
    <el-dialog
      :visible.sync="content_visible"
      width="30%"
      center
      :append-to-body="true"
    >
      <div>
        <el-table style="width: 100%;" :data="tabelData">
          <el-table-column width="120px">
            <template slot-scope="scope">
              {{ scope.row.label }}
            </template>
          </el-table-column>
          <el-table-column>
            <template slot-scope="scope">
              <template v-if="scope.row.label === '状态'">
                <el-tag v-if="scope.row.value == 0" type="info">
                  未解决
                </el-tag>
                <el-tag v-else type="success">
                  已解决
                </el-tag>
              </template>
              <template v-else>{{ scope.row.value }}</template>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeContent">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 工具类
import { isNull } from '@/utils/tool.js'
export default {
  computed: {
    disable() {
      return !this.multiple_selection.length > 0
    },
    transTabel() {
      let tabel = []
      if (isNull(this.help_info)) {
        let obj = JSON.parse(JSON.stringify(this.help_info[0]))
        console.log(obj, obj.length)
        let keys = Object.keys(obj)
        keys.forEach((k, index) => {
          // console.log(k, this.transTitle[index])
          this.transHead.push({
            prop: k,
            label: this.transTitle[index],
          })
          let kid = {
            label: this.transTitle[index],
            value: obj[k] ? obj[k] : null,
          }
          tabel.push(kid)
        })
        console.log(tabel, this.transHead)
        return tabel
      }
      return tabel
    },
    tabelData() {
      let tabel = []
      if (isNull(this.help_info)) {
        let obj = JSON.parse(JSON.stringify(this.help_info[0]))
        let tabelLabel = JSON.parse(JSON.stringify(this.tableInfo))
        tabelLabel.id = { label: '编号', prop: 'id' }
        tabelLabel.content = { label: '内容', prop: 'content' }
        let keys = Object.keys(obj)
        keys.forEach((k) => {
          console.log(k, obj[k], tabelLabel[k].label)
          let kid = {
            label: tabelLabel[k].label,
            value: obj[k],
          }
          tabel.push(kid)
        })
        console.log(tabel)
        return tabel
      }
      return tabel
    },
  },
  watch: {
    search_form: {
      handler(val) {
        console.debug('search_form', val)
      },
    },
    change_dialog_visible: {
      handler(val) {
        if (!val) {
          this.change_status_arr = []
          this.$refs.helpTableRef.clearSelection()
        }
      },
    },
    content_visible: {
      handler(val) {
        if (!val) {
          this.help_info = []
        }
      },
    },
  },
  data() {
    return {
      tatal: 10, //总数据
      pageCount: 1, // 页数
      pageSize: 10, // 页的大小
      health_arr: [
        { value: 1, label: '阳性' },
        { value: 0, label: '阴性' },
      ],
      // 查询信息
      search_form: {
        cid: '', // 根据小区编号
        pid: '',
        bid: '',
        sid: '',
        uname: '', // 根据用户名
        time: [], // 选择时间 可多选
        time_period: [], // 时间段
        plate: '', // 求助类型
        status: '', // 状态
      },
      search_info: {
        cid: { label: '社区', prop: 'cid' },
        uname: { label: '居民', prop: 'uname' },
        time: { label: '发布日期', prop: 'start_time' },
        plate: { label: '类型', prop: 'plate' },
        status: { label: '状态', prop: 'status' },
      },
      is_time_period: false, // 是否以时间段查询
      tableInfo: {
        cid: { label: '社区', prop: 'cid' },
        uid: { label: '居民编号', prop: 'uid' },
        uname: { label: '居民姓名', prop: 'uname' },
        address: { label: '住址', prop: 'address' },
        plate: { label: '板块', prop: 'plate' },
        status: { label: '状态', prop: 'status' },
        title: { label: '标题', prop: 'title' },
        postTime: { label: '发布时间', prop: 'postTime' },
        closeTime: { label: '解决时间', prop: 'closeTime' },
        solveUname: { label: '救援人', prop: 'solveUname' },
      },
      travel_table: [
        {
          id: 597,
          cid: '宾海小区4期5栋9层',
          uid: '10005',
          uname: '张三',
          address: '福建省漳州市芗城区滨海小区4栋5楼',
          plate: '药品求助',
          status: 0, //未解决
          title: '求3岁孩子可食用退烧药',
          content:
            '求助！孩子发烧，求孩子可用的退烧药，希望家里有多余药品的邻居能帮帮忙！',
          postTime: '2022-5-3 14:52:21',
          closeTime: '',
          solveUname: '',
        },
      ],
      dialog_info: {
        title: { label: '标题', prop: 'title' },
        content: { label: '内容', prop: 'content' },
        cid: { label: '通知社区', prop: 'cid' },
      },
      // 单个途径地对象
      temppass_address: {
        id: '',
        time: '',
        address: '',
      },
      change_dialog_visible: false, //删除弹窗是否可见
      change_status_arr: [], // 删除的用户数组
      multiple_selection: [],
      //板块数组
      plate_arr: [
        { value: 0, label: '医药求助' },
        { value: 1, label: '人员求助' },
        { value: 2, label: '生活用品求助' },
        { value: 3, label: '其他' },
      ],
      content_visible: false, // 求助信息窗口
      help_info: [], // 求助信息
      transHead: [],
    }
  },
  created() {},
  methods: {
    /* 请求 */
    /* DOM 操作 */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // 搜索
    search() {
      console.log(this.search_form)
      const data = this.travelFrm
    },
    // 清空搜索条件
    resetSearchFields() {
      this.search_form = {
        cid: '',
        uname: '',
        time: [],
        time_period: [],
        admin_id: '',
      }
    },
    // 表格选择
    selectTabel(val) {
      this.multiple_selection = val
      console.log(this.multiple_selection)
    },
    // 删除
    changeStatus(id) {
      this.change_dialog_visible = true
      if (isNull(id) && typeof id !== 'object') {
        this.change_status_arr.push(id)
      } else {
        this.multiple_selection.forEach((item) => {
          this.change_status_arr.push(item.id)
        })
        console.log('删除数组')
      }
    },
    falsechangeStatus() {
      this.change_dialog_visible = false
      this.$message('已取消删除')
    },
    truechangeStatus() {
      this.change_dialog_visible = false
      this.$message({
        message: '删除成功',
        type: 'success',
      })
    },
    closeContent() {
      this.content_visible = false
    },
    openContent(row) {
      this.content_visible = true
      this.help_info = [row]
    },
  },
}
</script>

<style lang="less" scoped>
#page-help {
  padding: 0 0.5rem;
  .page-table {
    .el-button {
      margin: 2px 0;
    }
  }
  .el-collapse-title-div {
    display: flex;
    justify-content: space-around;
    width: 90%;
  }
  .el-form-ul {
    min-height: 2.375rem;
    border: 1px solid #dcdfe6;
  }
  /deep/.el-collapse {
    border: none;
    background-color: rgba(255, 255, 255, 0);
  }
  /deep/.el-collapse-item__content {
    padding-bottom: 0;
  }
}
.page-botton-list {
  margin-bottom: 0.625rem;
}
.ul-address-date {
  display: flex;
  .ul-address-date-item {
    flex: 1;
    margin-right: 1.25rem;
    &:last-child {
      margin-right: 0;
    }
  }
}
/deep/.el-select {
  width: 100%;
}
.address-tag {
  margin-right: 0.625rem;
  &:last-child {
    margin-right: 0;
  }
}
.upload-list-pagination {
  margin-top: 1.8rem;
  display: flex;
  justify-content: center;
}
</style>
